<template>
  <div class="product-detail">
    <front-header></front-header>
    <div class="main-content">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/products' }">全部商品</el-breadcrumb-item>
          <el-breadcrumb-item>{{ product.name || '加载中...' }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 加载状态显示 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton style="width: 100%" animated>
          <template #template>
            <div style="display: flex; gap: 48px; padding: 24px;">
              <el-skeleton-item variant="image" style="width: 400px; height: 400px; border-radius: 8px;" />
              <div style="flex: 1">
                <el-skeleton-item variant="p" style="width: 50%; height: 24px; margin-bottom: 20px" />
                <el-skeleton-item variant="h3" style="width: 100%; height: 36px; margin-bottom: 24px" />
                <el-skeleton-item variant="text" style="width: 40%; height: 40px; margin-bottom: 24px" />
                <el-skeleton-item variant="p" style="width: 70%; height: 24px; margin-bottom: 16px" />
                <el-skeleton-item variant="p" style="width: 60%; height: 24px; margin-bottom: 32px" />
                <el-skeleton-item variant="text" style="width: 100%; height: 48px; margin-top: 32px" />
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>

      <!-- 商品基本信息区域 -->
      <div v-else class="product-info-section">
        <div class="product-main">
          <div class="image-container">
            <el-image
                :src="product.imageUrl?.startsWith('http') ? product.imageUrl : `/api${product.imageUrl}`"
                fit="cover"
                :preview-src-list="[product.imageUrl?.startsWith('http') ? product.imageUrl : `/api${product.imageUrl}`]"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="product-badges">
              <div class="badge new" v-if="product.isNew">新品上市</div>
              <div class="badge discount" v-if="product.isDiscount">特惠</div>
            </div>
          </div>

          <div class="product-info">
            <div class="category-tag">{{ product.category?.name || '商品' }}</div>
            <h1 class="product-name">{{ product.name }}</h1>

            <div class="price-section">
              <template v-if="product.isDiscount">
                <span class="discount-price">¥{{ product.discountPrice }}</span>
                <span class="original-price">¥{{ product.price }}</span>
                <span class="discount-tag">{{ ((1 - product.discountPrice/product.price) * 100).toFixed(0) }}% OFF</span>
              </template>
              <span v-else class="current-price">¥{{ product.price }}</span>
            </div>

            <div class="sales-info">
              <div class="info-item">
                <el-icon><SoldOut /></el-icon>
                <span>已售 {{ product.salesCount }} 件</span>
              </div>
              <div class="info-item">
                <el-icon><Box /></el-icon>
                <span>库存 {{ product.stock }} 件</span>
              </div>
              <div class="info-item" v-if="product.placeOfOrigin">
                <el-icon><Location /></el-icon>
                <span>产地: {{ product.placeOfOrigin }}</span>
              </div>
              <div class="stock-status" :class="{ 'low': product.stock < 10 }">
                {{ product.stock > 0 ? (product.stock < 10 ? '库存紧张' : '库存充足') : '暂时缺货' }}
              </div>
            </div>

            <div class="divider">
              <span class="divider-text">选择数量</span>
            </div>

            <div class="quantity-section">
              <el-input-number
                  v-model="quantity"
                  :min="1"
                  :max="product.stock"
                  size="small"
                  :disabled="!product.stock"
              >
              </el-input-number>
            </div>

            <div class="action-buttons">
              <el-button
                  type="primary"
                  size="large"
                  @click="handleAddToCart"
                  :disabled="!product.stock"
                  class="cart-btn"
              >
                <el-icon><ShoppingCart /></el-icon>
                加入购物车
              </el-button>

              <el-button
                  type="danger"
                  size="large"
                  @click="handleBuyNow"
                  :disabled="!product.stock"
                  class="buy-btn"
              >
                立即购买
              </el-button>

              <el-button
                  type="success"
                  size="large"
                  @click="handleContactSeller"
                  class="contact-btn"
              >
                <el-icon><ChatDotSquare /></el-icon>
                联系商家
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品详情和评价区域 -->
      <div class="detail-tabs">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="商品详情" name="detail">
            <div v-if="loading" class="loading-detail">
              <el-skeleton :rows="10" animated />
            </div>
            <div v-else class="detail-content rich-text-content" v-html="sanitizedDescription"></div>
          </el-tab-pane>
          <el-tab-pane label="商品评价" name="reviews">
            <div v-if="reviewsLoading" class="loading-reviews">
              <el-skeleton :rows="5" animated />
            </div>
            <div v-else class="reviews-list">
              <div v-if="reviews.length" class="review-items">
                <div v-for="review in reviews" :key="review.id" class="review-item">
                  <div class="review-header">
                    <div class="reviewer-info">
                      <el-avatar :size="40" :src="review.user.avatar">
                        {{ review.user.username.charAt(0).toUpperCase() }}
                      </el-avatar>
                      <span class="reviewer-name">{{ review.user.username }}</span>
                    </div>
                    <el-rate
                        v-model="review.rating"
                        disabled
                        show-score
                        text-color="#ff9900">
                    </el-rate>
                  </div>
                  <div class="review-content">{{ review.content }}</div>
                  <div class="review-time">{{ formatTime(review.createdAt) }}</div>
                </div>
              </div>
              <el-empty v-else description="暂无评价"></el-empty>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <front-footer></front-footer>

    <!-- 添加确认订单对话框 -->
    <el-dialog title="确认订单" v-model="orderDialogVisible" width="500px" custom-class="order-dialog">
      <!-- 商品信息 -->
      <div class="confirm-product-info">
        <el-image :src="product.imageUrl?.startsWith('http') ? product.imageUrl : `/api${product.imageUrl}`"
                  fit="cover" class="confirm-product-image">
        </el-image>
        <div class="confirm-product-detail">
          <div class="confirm-product-name">{{ product.name }}</div>
          <div class="confirm-product-price">
            <span class="price">¥{{ product.isDiscount ? product.discountPrice : product.price }}</span>
            <span class="quantity">x {{ quantity }}</span>
          </div>
        </div>
      </div>

      <!-- 收货地址选择 -->
      <div class="address-section">
        <div class="section-title">收货地址</div>
        <div v-if="addressesLoading" class="loading-addresses">
          <el-skeleton :rows="2" animated />
        </div>
        <div v-else class="address-content">
          <el-select v-model="selectedAddressId" placeholder="请选择收货地址" class="address-select">
            <el-option
                v-for="addr in addresses"
                :key="addr.id"
                :label="formatAddress(addr)"
                :value="addr.id"
            >
              <div class="address-option">
                <div class="receiver-info">
                  <span class="phone">{{ formatAddress(addr) }}</span>
                </div>
                <div class="address-detail">{{ addr.address }}</div>
              </div>
            </el-option>
          </el-select>
          <el-button type="primary" text bg @click="$router.push('/user-center')">
            <el-icon><Plus /></el-icon>添加新地址
          </el-button>
        </div>
      </div>

      <!-- 订单总价 -->
      <div class="order-total">
        <span>总计：</span>
        <span class="total-price">
          ¥{{ ((product.isDiscount ? product.discountPrice : product.price) * quantity).toFixed(2) }}
        </span>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="orderDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmOrder" :disabled="!selectedAddressId">
            提交订单
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 联系商家对话框 -->
    <el-dialog
      title="联系商家"
      v-model="contactDialogVisible"
      width="500px"
      custom-class="contact-dialog"
      :before-close="() => { contactDialogVisible = false }"
    >
      <div class="contact-content">
        <div class="product-info-mini">
          <el-image
            :src="product.imageUrl?.startsWith('http') ? product.imageUrl : `/api${product.imageUrl}`"
            fit="cover"
            class="product-image">
          </el-image>
          <div class="product-details">
            <div class="product-name">{{ product.name }}</div>
            <div class="product-price">
              ¥{{ product.isDiscount ? product.discountPrice : product.price }}
            </div>
          </div>
        </div>

        <div class="message-input-area">
          <el-input
            v-model="messageContent"
            type="textarea"
            :rows="4"
            placeholder="请输入您要咨询的内容..."
            maxlength="500"
            show-word-limit
          />
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="contactDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="sendMessageToSeller"
            :loading="submitLoading"
          >
            发送消息
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 全局加载遮罩 -->
    <el-backdrop v-model="submitLoading">
      <div class="loading-overlay">
        <el-icon class="is-loading"><Loading /></el-icon>
        <p>处理中...</p>
      </div>
    </el-backdrop>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElBreadcrumb, ElBreadcrumbItem, ElSkeleton, ElSkeletonItem, ElImage, ElAvatar, ElRate, ElTabs, ElTabPane, ElEmpty, ElInputNumber, ElButton, ElDialog, ElSelect, ElOption, ElIcon, ElBackdrop } from 'element-plus'
import { Picture, SoldOut, Box, Location, ShoppingCart, Plus, Loading } from '@element-plus/icons-vue'
import Request from '@/utils/request'
import { formatTime } from '@/utils/time'
import FrontHeader from '@/components/front/FrontHeader.vue'
import FrontFooter from '@/components/front/FrontFooter.vue'
import DOMPurify from 'dompurify'

// 路由实例
const route = useRoute()
const router = useRouter()

// 响应式数据
const userInfo = ref(JSON.parse(localStorage.getItem('frontUser') || '{}'))
const product = ref({})
const quantity = ref(1)
const reviews = ref([])
const orderDialogVisible = ref(false)
const selectedAddressId = ref(null)
const addresses = ref([])
const activeTab = ref('detail')
const loading = ref(true)
const reviewsLoading = ref(true)
const addressesLoading = ref(false)
const submitLoading = ref(false)

// 联系商家相关数据
const contactDialogVisible = ref(false)
const messageContent = ref('')

// 获取商品详情
const getProductDetail = async () => {
  try {
    loading.value = true
    const res = await Request.get(`/product/${route.params.id}`)
    if (res.code === '0') {
      product.value = res.data
    }
  } catch (error) {
    console.error('获取商品详情失败:', error)
    ElMessage.error('获取商品详情失败')
  } finally {
    loading.value = false
  }
}

// 获取商品评价
const getProductReviews = async () => {
  try {
    reviewsLoading.value = true
    const res = await Request.get(`/review/product/${route.params.id}`, {
      params: {
        status: 1  // 只获取已通过的评价
      }
    })
    if (res.code === '0') {
      reviews.value = res.data
    }
  } catch (error) {
    console.error('获取商品评价失败:', error)
  } finally {
    reviewsLoading.value = false
  }
}

// 检查是否登录
const isLogin = () => {
  const userStr = localStorage.getItem('frontUser')
  if (!userStr) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return false
  }
  return true
}

// 添加到购物车
const handleAddToCart = async () => {
  if (!isLogin()) return

  try {
    submitLoading.value = true
    const userId = userInfo.value.id

    const data = {
      userId,
      productId: product.value.id,
      quantity: quantity.value
    }

    const res = await Request.post('/cart', data)
    if (res.code === '0') {
      ElMessage.success('已添加到购物车')
    }
  } catch (error) {
    console.error('添加到购物车失败:', error)
    ElMessage.error('添加失败')
  } finally {
    submitLoading.value = false
  }
}

// 立即购买
const handleBuyNow = async () => {
  if (!isLogin()) return

  try {
    // 获取用户地址列表
    addressesLoading.value = true
    await getAddresses()
    // 显示确认订单对话框
    orderDialogVisible.value = true
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败')
  } finally {
    addressesLoading.value = false
  }
}

// 获取地址列表
const getAddresses = async () => {
  try {
    const userId = userInfo.value.id
    const res = await Request.get(`/address/user/${userId}`)
    if (res.code === '0') {
      addresses.value = res.data
      // 如果只有一个地址，自动选中
      if (addresses.value.length === 1) {
        selectedAddressId.value = addresses.value[0].id
      }
    }
  } catch (error) {
    console.error('获取地址列表失败:', error)
    ElMessage.error('获取地址列表失败')
  }
}

// 格式化地址
const formatAddress = (addr) => {
  return `${addr.phone} ${addr.address}`
}

// 确认订单
const confirmOrder = async () => {
  try {
    if (!selectedAddressId.value) {
      ElMessage.warning('请选择收货地址')
      return
    }

    submitLoading.value = true
    const selectedAddress = addresses.value.find(addr => addr.id === selectedAddressId.value)
    const orderData = {
      userId: userInfo.value.id,
      productId: product.value.id,
      quantity: quantity.value,
      price: product.value.isDiscount ? product.value.discountPrice : product.value.price,
      totalPrice: (product.value.isDiscount ? product.value.discountPrice : product.value.price) * quantity.value,
      recvAddress: selectedAddress.address,
      recvPhone: selectedAddress.phone,
      recvName: selectedAddress.receiver
    }

    const res = await Request.post('/order', orderData)
    if (res.code === '0') {
      ElMessage.success('下单成功')
      orderDialogVisible.value = false
      router.push('/order')
    }
  } catch (error) {
    console.error('创建订单失败:', error)
    ElMessage.error('下单失败')
  } finally {
    submitLoading.value = false
  }
}

// 联系商家
const handleContactSeller = () => {
  if (!isLogin()) return
  contactDialogVisible.value = true
  messageContent.value = ''
}

// 发送消息给商家
const sendMessageToSeller = async () => {
  if (!messageContent.value.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }
  //
  // if (product.value.userId==null) {
  //   console.log(product.value.id)
  //   ElMessage.error('无法获取商家信息')
  //   return
  // }

  try {
    submitLoading.value = true
    const messageData = {
      senderId: userInfo.value.id,
      content: messageContent.value,
      messageType: 0, // 普通消息
      productId: product.value.id, // 商品ID

    }
    console.log(messageData)

    const res = await Request.post(
        '/message/create',
        {},  // 请求体（无需数据，留空）
        {
          params: messageData  // 参数放在这里，会自动拼到 URL 后（?senderId=xxx&content=xxx...）
        }
    )
    if (res.code === '0') {
      ElMessage.success('消息发送成功')
      contactDialogVisible.value = false
    } else {
      ElMessage.error(res.msg || '发送失败')
    }
  } catch (error) {
    console.error('发送消息失败:', error)
    ElMessage.error('发送失败: ' + (error.response?.data?.msg || error.message))
  } finally {
    submitLoading.value = false
  }
}

// 计算属性
const sanitizedDescription = computed(() => {
  return product.value.description ? DOMPurify.sanitize(product.value.description) : ''
})

// 生命周期钩子
onMounted(() => {
  userInfo.value = JSON.parse(localStorage.getItem('frontUser') || '{}')
  getProductDetail()
  getProductReviews()
})
</script>

<style scoped>
.product-detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.main-content {
  flex: 1;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.breadcrumb {
  margin-bottom: 24px;
  padding: 0 4px;
}

/* 美化面包屑 */
:deep(.el-breadcrumb) {
  font-size: 14px;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #67C23A;
  font-weight: 500;
}

.product-info-section {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.product-info-section:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.product-main {
  display: flex;
  gap: 48px;
  padding: 24px;
}

.image-container {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

:deep(.el-image) {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.image-container:hover :deep(.el-image) {
  transform: scale(1.03);
}

:deep(.el-image__inner) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片加载错误状态美化 */
.image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
}

.image-slot :deep(.el-icon) {
  font-size: 48px;
}

.product-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

.badge {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.badge:hover {
  transform: scale(1.05);
}

.badge.new {
  background: linear-gradient(135deg, #67C23A, #85ce61);
}

.badge.discount {
  background: linear-gradient(135deg, #ff4757, #ff6b81);
}

.discount-tag {
  background: #ff4757;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 12px;
  box-shadow: 0 1px 3px rgba(255, 71, 87, 0.3);
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.category-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.category-tag:hover {
  background: rgba(103, 194, 58, 0.2);
  transform: translateX(3px);
}

.product-name {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.product-name:hover {
  color: #4e9e2e;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}

.current-price,
.discount-price {
  font-size: 32px;
  color: #ff4757;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255, 71, 87, 0.1);
}

.original-price {
  font-size: 18px;
  color: #909399;
  text-decoration: line-through;
}

.sales-info {
  display: flex;
  gap: 32px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
}

.info-item :deep(.el-icon) {
  font-size: 16px;
  color: #67C23A;
  transition: transform 0.3s ease;
}

.info-item:hover :deep(.el-icon) {
  transform: scale(1.1);
}

.divider {
  position: relative;
  height: 1px;
  background: #f0f2f5;
  margin: 24px 0;
}

.divider-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: white;
  padding-right: 12px;
  color: #909399;
  font-size: 14px;
}

.quantity-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

/* 数量选择器美化 */
:deep(.el-input-number) {
  border-radius: 8px;
  overflow: hidden;
  border-color: #e5e6eb;
  transition: all 0.3s ease;
}

:deep(.el-input-number:hover) {
  border-color: #67C23A;
  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.1);
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  width: 36px;
  height: 36px;
  background-color: #f5f7fa;
  color: #606266;
  transition: all 0.3s ease;
}

:deep(.el-input-number__decrease:hover),
:deep(.el-input-number__increase:hover) {
  background-color: #eaf8e6;
  color: #67C23A;
}

:deep(.el-input__inner) {
  height: 36px;
  text-align: center;
  border-left: 1px solid #e5e6eb;
  border-right: 1px solid #e5e6eb;
}

.action-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.cart-btn,
.buy-btn {
  flex: 1;
  height: 48px;
  font-size: 16px;
  border-radius: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 按钮点击波纹效果 */
.cart-btn::after,
.buy-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.cart-btn:active::after,
.buy-btn:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

.cart-btn {
  background: linear-gradient(135deg, #67C23A, #5aad32);
  border: none;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.2);
}

.cart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.3);
  background: linear-gradient(135deg, #76c948, #67c23a);
}

.cart-btn:disabled {
  background: #b3e099;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.buy-btn {
  background: linear-gradient(135deg, #f56c6c, #e64242);
  border: none;
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.2);
}

.buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 108, 108, 0.3);
  background: linear-gradient(135deg, #f77c7c, #f56c6c);
}

.buy-btn:disabled {
  background: #f8b4b4;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.detail-tabs {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 标签页美化 */
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #f0f2f5;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 24px;
  height: 50px;
  line-height: 50px;
  transition: all 0.3s ease;
  position: relative;
}

:deep(.el-tabs__item::after) {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #67C23A;
  transition: width 0.3s ease;
}

:deep(.el-tabs__item.is-active) {
  color: #67C23A;
  font-weight: 500;
}

:deep(.el-tabs__item.is-active::after) {
  width: 100%;
}

:deep(.el-tabs__item:hover:not(.is-active)) {
  color: #85ce61;
  background-color: #f5faf5;
}

:deep(.el-tabs__active-bar) {
  display: none;
}

.review-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.review-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.review-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.review-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.review-item:hover::before {
  background-color: #67C23A;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 头像美化 */
:deep(.el-avatar) {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #f0f2f5;
}

.reviewer-info:hover :deep(.el-avatar) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
}

.reviewer-name {
  font-weight: 500;
  color: #303133;
  transition: color 0.3s ease;
}

.reviewer-info:hover .reviewer-name {
  color: #67C23A;
}

/* 评分美化 */
:deep(.el-rate) {
  transition: transform 0.3s ease;
}

.review-header:hover :deep(.el-rate) {
  transform: scale(1.05);
}

.review-content {
  color: #606266;
  line-height: 1.6;
  margin: 12px 0;
  padding: 12px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.01);
  transition: background-color 0.3s ease;
}

.review-item:hover .review-content {
  background-color: rgba(103, 194, 58, 0.03);
}

.review-time {
  color: #909399;
  font-size: 12px;
  text-align: right;
  padding-top: 8px;
  border-top: 1px dashed #f0f2f5;
}

/* 确认订单对话框样式 */
:deep(.order-dialog .el-dialog__header) {
  border-bottom: 1px solid #f0f2f5;
  padding: 16px 20px;
}

:deep(.order-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.confirm-product-info {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}

.confirm-product-info:hover {
  transform: translateX(3px);
}

.confirm-product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.confirm-product-detail {
  flex: 1;
}

.confirm-product-name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.confirm-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-product-price .price {
  color: #ff4757;
  font-weight: 600;
}

.confirm-product-price .quantity {
  color: #909399;
}

.address-section {
  margin: 24px 0;
}

.section-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 16px;
  font-weight: 500;
  padding-left: 4px;
  border-left: 3px solid #67C23A;
}

.address-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.address-select {
  width: 100%;
}

/* 下拉选择器美化 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__inner) {
  border-radius: 8px;
  height: 40px;
  border-color: #e5e6eb;
  transition: all 0.3s ease;
}

:deep(.el-select .el-input__inner:focus) {
  border-color: #67C23A;
  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.1);
}

:deep(.el-select-dropdown) {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: #f0f2f5;
  overflow: hidden;
}

:deep(.el-select-dropdown__item) {
  padding: 12px 16px;
  transition: all 0.3s ease;
}

:deep(.el-select-dropdown__item:hover) {
  background-color: #f5faf5;
  color: #67C23A;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: #eaf8e6;
  color: #67C23A;
}

.address-option {
  padding: 8px 0;
}

.receiver-info {
  margin-bottom: 4px;
}

.receiver-info .phone {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.address-detail {
  color: #909399;
  font-size: 13px;
}

/* 添加地址按钮美化 */
:deep(.address-content .el-button) {
  white-space: nowrap;
  transition: all 0.3s ease;
  border-radius: 8px;
}

:deep(.address-content .el-button:hover) {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.order-total {
  text-align: right;
  padding: 16px;
  border-top: 1px solid #f0f2f5;
  font-size: 14px;
  color: #606266;
}

.total-price {
  color: #ff4757;
  font-size: 20px;
  font-weight: 600;
  margin-left: 8px;
  text-shadow: 0 1px 2px rgba(255, 71, 87, 0.1);
}

:deep(.el-dialog__body) {
  padding: 20px;
}

/* 对话框底部按钮美化 */
:deep(.dialog-footer .el-button) {
  border-radius: 8px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

:deep(.dialog-footer .el-button--primary) {
  background-color: #67C23A;
  border-color: #67C23A;
}

:deep(.dialog-footer .el-button--primary:hover) {
  background-color: #5aad32;
  border-color: #5aad32;
  transform: translateY(-2px);
}

:deep(.dialog-footer .el-button:not(.el-button--primary)) {
  background-color: #f5f7fa;
  color: #606266;
}

:deep(.dialog-footer .el-button:not(.el-button--primary):hover) {
  background-color: #e9ecef;
  transform: translateY(-2px);
}

.rich-text-content {
  padding: 24px;
  color: #606266;
  line-height: 1.8;
}

/* 富文本内容美化 */
:deep(.rich-text-content p) {
  margin: 1em 0;
  line-height: 1.8;
}

:deep(.rich-text-content h1),
:deep(.rich-text-content h2),
:deep(.rich-text-content h3) {
  margin: 1.5em 0 0.8em;
  font-weight: 600;
  line-height: 1.4;
  color: #303133;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f2f5;
}

:deep(.rich-text-content ul),
:deep(.rich-text-content ol) {
  margin: 1em 0;
  padding-left: 2em;
}

:deep(.rich-text-content blockquote) {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #67C23A;
  background-color: #f5faf5;
  color: #606266;
  border-radius: 0 4px 4px 0;
}

:deep(.rich-text-content img) {
  max-width: 100%;
  height: auto;
  margin: 1em auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

:deep(.rich-text-content img:hover) {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

:deep(.rich-text-content a) {
  color: #67C23A;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0 2px;
  border-bottom: 1px dotted #67C23A;
}

:deep(.rich-text-content a:hover) {
  color: #5aad32;
  background-color: rgba(103, 194, 58, 0.1);
  border-bottom: 1px solid #67C23A;
}

/* 加载动画容器样式 */
.loading-container {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.loading-detail,
.loading-reviews,
.loading-addresses {
  padding: 20px;
}

/* 加载遮罩样式 */
:deep(.el-backdrop) {
  background-color: rgba(0, 0, 0, 0.5);
}

.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.loading-overlay :deep(.el-icon) {
  font-size: 40px;
  margin-bottom: 16px;
  animation: spin 1.5s linear infinite;
}

.loading-overlay p {
  margin: 0;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 库存状态样式增强 */
.stock-status {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.stock-status:not(.low) {
  color: #67C23A;
  background-color: rgba(103, 194, 58, 0.1);
}

.stock-status.low {
  color: #fa8c16;
  background-color: rgba(250, 140, 22, 0.1);
  animation: pulse 2s infinite;
}

/* 动画定义 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 响应式布局优化 */
@media (max-width: 768px) {
  .product-main {
    flex-direction: column;
    gap: 24px;
  }

  .image-container {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 500px;
    margin: 0 auto;
  }

  .product-info {
    padding: 0;
  }

  .sales-info {
    gap: 16px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .cart-btn, .buy-btn {
    width: 100%;
  }
}

.contact-btn {
  background: linear-gradient(135deg, #67C23A, #5aad32);
  border: none;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.2);
  flex: 1;
  height: 48px;
  font-size: 16px;
  border-radius: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.3);
  background: linear-gradient(135deg, #76c948, #67c23a);
}

/* 联系商家对话框样式 */
:deep(.contact-dialog .el-dialog__header) {
  border-bottom: 1px solid #f0f2f5;
  padding: 16px 20px;
}

:deep(.contact-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.contact-content {
  padding: 20px 0;
}

.product-info-mini {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}

.product-info-mini:hover {
  transform: translateX(3px);
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  color: #ff4757;
  font-weight: 600;
  font-size: 16px;
}

.message-input-area {
  margin-bottom: 10px;
}

:deep(.message-input-area .el-textarea__inner) {
  border-radius: 8px;
  resize: none;
}

:deep(.message-input-area .el-input__count) {
  background: transparent;
  color: #909399;
}
</style>